

.alert-tip {
  background        : rgba(4, 190, 2, 1);
  color             : #fff;
  text-align        : center;
  min-width         : 200px;
  position          : fixed;
  font-size         : 13px;
  padding           : 15px 0;
  line-height       : 16px;
  border-radius     : 5px;
  left              : 50%;
  top               : 0;
  z-index           : 999999;
  -webkit-transform : translate(-50%, 0);
  transform         : translate(-50%, 0);
}

.alert-tip.level-0 {
  color            : #fff;
  background-color : #d9534f;
  border-color     : #d43f3a;
}

.alert-tip.level-1 {
  color            : #fff;
  background-color : #449d44;
  border-color     : #398439;
}

.alert-tip p {
  color : #fff;
}

.example-enter {
  opacity: 0.01;
  -webkit-transform : translate(-50%, -100%);
  transform         : translate(-50%, -100%);
}

.example-enter.example-enter-active {
  opacity: 1;
  -webkit-transform : translate(-50%, 0);
  transform         : translate(-50%, 0);
  transition: all 300ms ease-in;
}

.example-leave {
  opacity: 1;
  -webkit-transform : translate(-50%, 0);
  transform         : translate(-50%, 0);
}

.example-leave.example-leave-active {
  opacity: 0.01;
  -webkit-transform : translate(-50%, -100%);
  transform         : translate(-50%, -100%);
  transition: all 300ms ease-in;
}





